<template>
	<view>
		<view class="texts-box">
			<view class="left">
				<view>晚上好，</view>
				<view>您已连续阅读182天！</view>
			</view>
			<view class="right">
				<juhe-book
					:imgUrl="
						'http://book.img.ireader.com/idc_1/m_1,w_117,h_156,q_100/406b54f0/group61/M00/8C/FF/CmQUOFyMkWqEd1e1AAAAAFXSB3s392937471.jpg?v=jbJgZxLW&t=CmQUOFyMkWo.'
					"
				></juhe-book>
				<text class="text">继续阅读</text>
			</view>
		</view>
		<view class="search-box"><input type="text" class="input" value="" placeholder="搜索喜欢的书籍" /></view>
		<scroll-view class="books" scroll-y="x">
			<view class="book-box" v-for="(one, index) in 10" :key="index">
				<juhe-book
					:imgUrl="
						'http://book.img.ireader.com/idc_1/m_1,w_117,h_156,q_100/406b54f0/group61/M00/8C/FF/CmQUOFyMkWqEd1e1AAAAAFXSB3s392937471.jpg?v=jbJgZxLW&t=CmQUOFyMkWo.'
					"
				></juhe-book>
				<text class="title">这里是小说名字</text>
				<text class="text">作者名称</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped="">
.books {
	padding: 40upx;
	background-color: #fff;
	padding-top: 20upx;
}
.search-box {
	padding: 40upx;
	background-color: #fff;
	.input {
		border-radius: 16upx;
		background-color: rgb(247, 247, 247);
		font-size: 28upx;
		padding: 10upx 20upx;
	}
}
.texts-box {
	background-color: #fff;
	padding: 40upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 0;
	.left {
		flex: 1;
		margin-right: 20upx;
		font-size: 50upx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		font-weight: lighter;
		view {
			&:last-child {
				margin-top: 10upx;
			}
		}
	}

	.right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.text {
			font-size: $uni-font-size-sm;
			margin-top: 10upx;
			color: #aaa;
		}
	}
}
</style>
